<template>
  <div ref="loading"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'loadingEffect',
  data() {
    return {
      echarts: null,
      options: {
        title: {
          text: '异步获取数据时的加载动画',
          subtext: '数据纯属虚构',
          left: 'center'
        },
        // 是否开启动画，默认为true
        animation: true,
        series: {
          type: 'pie',
          data: [],
          radius: '50%'
        }
      }
    }
  },
  async mounted() {
    this.echarts = echarts.init(this.$refs.loading)
    // 显示加载动画
    this.echarts.showLoading()
    let {data} = await this.getData()
    this.options.series.data = data
    this.echarts.setOption(this.options)
    // 隐藏加载动画
    this.echarts.hideLoading()
  },
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        // 模拟网络延迟
        setTimeout(() => resolve({
          data: [
            {name: '羊毛衫', value: 100},
            {name: '土鸡蛋', value: 35}
          ]
        }), 3000)
      })
    }
  }
}
</script>

<style scoped>

</style>
